<template>
  <div>
    <div class="panel-container">
      <!--搜索-->
      <searchuinew :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchuinew>
    </div>
    <!--数据信息-->
    <div class="panel-container no-margin">
      <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" @sort-change="handleSortChange">
        <el-table-column align="center" header-align="center" label="咨询类型" prop="cls_num" width="200">
          <template slot-scope="scope">
            {{ getCls(scope.row.cls_num) }}
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="状态" prop="is_look">
          <template slot-scope="scope">
            {{ getView(scope.row.is_look) }}
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="表单信息" prop="png">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleView(scope)">点击查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="咨询时间" prop="created_time" width="150" sortable="custom"> </el-table-column>
        <el-table-column align="center" header-align="center" label="绑定订单" prop="order_uid" width="200"></el-table-column>
        <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleBand(scope)" v-if="scope.row.order_uid">修改绑定</el-button>
            <el-button size="mini" type="text" @click="handleBand(scope)" v-else>点击绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>

    <!--  表单信息 -->
    <el-drawer title="表单信息" :visible.sync="showDialogDetail" :destroy-on-close="true" size="40%">
      <DialogDetail :info="currentInfo" @close="showDialogDetail = false" @refresh="handleRefresh" />
    </el-drawer>
    <!--  绑定订单 -->
    <el-drawer title="绑定订单" :visible.sync="showDialogBand" :destroy-on-close="true" size="40%">
      <DialogBand :info="currentInfo" @close="showDialogBand = false" @refresh="handleRefresh" />
    </el-drawer>
  </div>
</template>

<script>
import { apiOnevoneArr, apiOvoLook } from '@/api/quotationPay'
import DialogDetail from './DialogDetail'
import DialogBand from './DialogBand'
import { formatFormData } from '@/utils'
export default {
  name: 'index',
  components: { DialogDetail, DialogBand },
  data() {
    const clsList = [
      { id: '', text: '全部' },
      { id: 1, text: '风险对冲策略' },
      { id: 2, text: '风险对冲产品方案订制' },
      { id: 3, text: '其他策略方案' },
    ]
    const viewList = [
      { id: '', text: '全部' },
      { id: 0, text: '未查看' },
      { id: 1, text: '已查看' },
    ]
    return {
      viewList,
      clsList,
      searchFormArr: [
        {
          fieldName: '查看状态:',
          type: 'select',
          field: 'is_look ',
          option: viewList,
          placeholder: '请选择',
        },
        {
          fieldName: '咨询类型:',
          type: 'select',
          field: 'cls_num',
          option: clsList,
          placeholder: '请选择',
        },
        {
          fieldName: '咨询时间',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择咨询时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
      ],
      isAccording: true,
      searchParams: {
        cls_num: '',
        created_time1: '',
        created_time2: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      currentInfo: '',
      showDialogDetail: false,
      showDialogBand: false,
      sort: {},
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      const formData = new FormData()
      if (this.sort.order) {
        // 排序
        if (this.sort.prop === 'created_time') {
          info.order_by_fk = this.sort.order === 'ascending' ? 2 : this.sort.order === 'descending' ? 1 : ''
        }
      }
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiOnevoneArr(formData)
        .then((res) => {
          const { items, total } = res.result
          this.dataList = items
          this.totalPage = total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 列表查询
    searchParma(e) {
      console.log(e)
      this.searchFormArr.forEach((item) => {
        if (item.field === 'time') return
        if (e[item.field] || e[item.field] === 0) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      if (e.time) {
        this.searchParams.created_time1 = e.time[0]
        this.searchParams.created_time2 = e.time[1]
      } else {
        this.searchParams.created_time1 = this.searchParams.created_time2 = ''
      }
      this.pageIndex = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 查看
    handleView(scope) {
      console.log('view')
      this.showDialogDetail = true
      this.currentInfo = scope.row
      apiOvoLook(formatFormData({ id: scope.row.id })).then((res) => {
        scope.row.is_look = 1
      })
    },
    // 绑定订单
    handleBand(scope) {
      this.currentInfo = scope.row
      this.showDialogBand = true
    },
    // 刷新列表
    handleRefresh() {
      this.showDialogBand = false
      this.getDataList()
    },
    getView(value) {
      return this.viewList.find((item) => item.id === value).text
    },
    getCls(value) {
      return this.clsList.find((item) => item.id === value).text
    },
    // 表格排序
    handleSortChange(sort) {
      this.sort = sort
      this.getDataList()
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text-1 {
  .link {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
